<template>
    <div class="menu">
        <a id="exportBtn" @click="exportExcel" style="margin:0 15px;">
            <el-button type="primary">下载模板</el-button>
        </a>
        <el-upload
                :show-file-list="false"
                action="#"
                :auto-upload="false"
                style="display: inline-block"
                accept=".xls,.xlsx"
                :on-change="handleChange">
            <el-button type="primary">导入 excel</el-button>
        </el-upload>
        <div v-if="listExcel.length" style="margin-top: 20px">
            <el-table ref="listTable" :data="listExcel" stripe style="width: 100%" max-height="600"
                      @selection-change="selectionChange">
                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column type="index" show-overflow-tooltip label="序号" fixed width="50">
                </el-table-column>
                <el-table-column prop="deliveryTime" label="配送日期" width="160" v-if="!is_edit">
                    <template slot-scope="scope">
                        <el-date-picker
                                style="width: 135px"
                                v-model="scope.row.deliveryTime"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                placeholder="选择配送日期"
                                :disabled="is_edit">
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column prop="buySeq" label="配送批次" width="160" v-if="!is_edit">
                    <template slot-scope="scope">
                        <!--<el-input v-model="scope.row.buySeq" :disabled="is_edit" placeholder="请输入内容"></el-input>-->
                        <el-select class="form-field" v-model="scope.row.buySeq" :disabled="is_edit" placeholder="请选择">
                            <!--<el-option v-for="item in buySeqs" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
                            <el-option key="0" label="第一批次" value="0"></el-option>
                            <el-option key="1" label="第二批次" value="1"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="buyerName" label="采购商名称	" width="160" v-if="!is_edit">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.buyerName" :disabled="is_edit" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsName" label="商品名称" min-width="160">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.goodsName" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsModel" label="商品规格" width="160">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.goodsModel" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="80">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unit" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="buyPrice" label="采购价格" width="180">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.buyPrice" style="width: 150px" :precision="2" :step="0.1"
                                         :max="1000"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="orderGoodsNum" label="采购数量" width="180">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.orderGoodsNum" style="width: 150px" :precision="2"
                                         :step="0.1" :max="1000"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="needNote" label="采购需求" width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.needNote" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="60">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="del(scope.row, scope.$index)" type="text" size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" style="text-align: right;margin-top: 20px">
                <el-button type="primary"
                           :loading="btnFlag"
                           @click="selectList">提交
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import store from "@/store";

    export default {
        props: {
            down: String,
            data: Object,
        },
        data: function () {
            return {
                headers: {
                    // 'Content-Type':'multipart/form-data',
                    'Authorization': 'Bearer ' + store.getters.access_token
                },
                listExcel: [{}],
                list: [],
                is_edit: false,
                buySeqs: this.$dic.buySeqOptions,
                btnFlag: false
            }
        },
        created() {
            if (this.data) {
                this.is_edit = true;
            } else {
                this.is_edit = false;
            }
        },
        methods: {
            checked() {
                this.$refs.listTable.toggleAllSelection();
            },
            //导出模板
            exportExcel() {
                if (this.down == 0) {
                    window.open("/file/客户采购订单导入模板.xlsx");
                }
                if (this.down == 1) {
                    window.open("/file/客户采购订单明细导入模板.xlsx");
                }
            },
            //编辑
            edit(row, index, done) {
                this.listExcel[index] = row;
                this.$set(this.listExcel, this.listExcel[index], row);
                setTimeout(() => {
                    this.$message.success('修改成功');
                    done();
                }, 1000)
            },
            //删除
            del(row, index) {
                this.listExcel.splice(index, 1);
            },
            selectionChange(list) {
                this.list = list;
            },
            selectList() {
                if (this.list.length) {
                    this.$emit('select', this.list)
                } else {
                    this.$notify({
                        title: '提示',
                        message: '请选择商品',
                    });
                    this.$message.error('请选择商品');
                }
            },
            handleChange(file) {
                this.listExcel = [{}];
                this.list = [];
                let name = file.name;
                let type = name.substring(name.lastIndexOf('.')).toLowerCase();
                if(!(type ==='.xls' || type === '.xlsx')){
                    this.$message.warning("请选择Excel文件")
                    return ;
                }
                this.$export.xlsx(file.raw).then(data => {
                    this.listExcel = data.results.map((item) => {
                        let rowItem = {
                            deliveryTime: this.formatDate(item.配送日期),
                            buySeq: String(item.配送批次),
                            buyerName: item.采购商名称,
                            goodsName: item.商品名称,
                            goodsModel: item.商品规格,
                            unit: item.单位,
                            buyPrice: item.采购价格,
                            orderGoodsNum: item.采购数量,
                            needNote: item.采购备注
                        };
                        if (this.data) {
                            rowItem.deliveryTime = this.data.deliveryTime + ' ' + '00' + ':' + '00' + ':' + '00';
                            rowItem.buySeq = this.data.buySeq;
                            rowItem.needNote = this.data.needNote;
                            rowItem.buyerName = this.data.buyerName;
                        }
                        return rowItem;
                    });
                    this.checked();//每次更新了数据，触发这个函数即可。
                })
            },
            formatDate: function (numb, format = "-") {
                let time = new Date((numb - 1) * 24 * 3600000 + 1)
                time.setYear(time.getFullYear() - 70)
                let year = time.getFullYear() + ''
                let month = time.getMonth() + 1 + ''
                let date = time.getDate() + ''
                if (month.length == 1) {
                    month = '0' + month
                }
                if (date.length == 1) {
                    date = '0' + date
                }
                if (format && format.length === 1) {
                    return year + format + month + format + date + ' ' + '00' + ':' + '00' + ':' + '00'
                }
                let times = year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date);
                return times;
            }
        }
    }
</script>

<style scoped lang="scss">
    .menu {
        text-align: center;
        margin-top: -35px;
        border: 0;
    }

    .upload-demo {
        display: inline-block;
        margin: 0 10px;
    }
</style>
